<template>
    <div style="margin: 20px;">
        <div>
            <ul>
                <li>
                    <Button type="primary" icon="plus-round" @click="openNewModal()">新建</Button>
                    <Button type="success" icon="wrench" @click="openModifyModal()">修改</Button>
                    <Button type="error" icon="trash-a" @click="del()">删除</Button> 
                </li>
                <li>
                    <div style="padding: 10px 0;">
                    	<Table border :columns="columns1" :data="data1" :height="300" @on-selection-change="s=>{change(s)}" @on-row-dblclick="s=>{dblclick(s)}"></Table>                    
                    </div> 
                    
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total @on-change="e=>{pageSearch(e)}"></Page>
                    </div>  
                </li>
            </ul>
        </div> 
        <!--添加modal-->  
        <Modal :mask-closable="false" :visible.sync="newModal" :loading = "loading" v-model="newModal" width="600" title="新建" @on-ok="newOk('carsNew')" @on-cancel="cancel()">
            <Form ref="carsNew" :model="carsNew" :rules="ruleNew" :label-width="80" >
                <Row>       
                    <Col span="12">
                        <Form-item label="电话:" prop="phone">
                            <Input v-model="carsNew.phone" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12" >
                        <Form-item label="车型:" prop="carType">
                            <Select  v-model="carsNew.carType" filterable clearable style="width: 200px">
                                <Option v-for="item in menuList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Form-item>                      
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="分类:" prop="kind">
                            <Input v-model="carsNew.kind" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="停车位:" prop="carOption">
                            <Input v-model="carsNew.carOption" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>               
            </Form>
        </Modal> 
        <!--修改modal-->  
        <Modal :mask-closable="false" :visible.sync="modifyModal" :loading = "loading" v-model="modifyModal" width="600" title="修改" @on-ok="modifyOk('carsModify')" @on-cancel="cancel()">
            <Form ref="carsModify" :model="carsModify" :rules="ruleNew" :label-width="80" >
                <Row>       
                    <Col span="12">
                        <Form-item label="电话:" prop="phone">
                            <Input v-model="carsModify.phone" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12" >
                        <Form-item label="车型:" prop="carType">
                            <Select  v-model="carsModify.carType" filterable clearable style="width: 200px">
                                <Option v-for="item in menuList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Form-item>                      
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="分类:" prop="kind">
                            <Input v-model="carsModify.kind" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="停车位:" prop="carOption">
                            <Input v-model="carsModify.carOption" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>               
            </Form>
        </Modal>      
    </div>   
</template>
<script>
    export default {
        data () {
            return {
                /*用于查找的id*/
                id:null,
            	/*选择的数量*/
                count:null,
            	/*选中的组数据*/
                groupId:null,
            	/*新建modal的显示参数*/
                newModal:false,
                /*修改modal的显示参数*/
                modifyModal:false,
            	/*分页total属性绑定值*/
                total:0,
                /*loading*/
                loading: true,
                /*pageInfo实体*/
                pageInfo:{
                	page:0,
                	pageSize:10
                },
                /*列表*/
                menuList:[],
                /*cars实体*/
                cars:{                
                    id:null,
                    phone:null,
                    carType:null,
                    kind:null,
                    carOption:null,
                    state:null    
                },
                /*用于添加的carsNew实体*/
                carsNew:{
                	id:null,
                    phone:null,
                    carType:null,
                    kind:null,
                    carOption:null,
                    state:null
                },
                /*用于修改的menu实体*/
                carsModify:{
                 	id:null,
                    phone:null,
                    carType:null,
                    kind:null,
                    carOption:null,
                    state:null
                },
                /*验证*/
                ruleNew:{
                    carType: [
                        { type:'number',required: true, message: '输入车型', trigger: 'blur' }       
                    ],
                    kind: [
                        { type:'string',required: true, message: '输入分类', trigger: 'blur' }
                    ],
                    carOption: [
                        { type:'string',required: true, message: '输入车位', trigger: 'blur' }
                    ],
                    phone: [
                        { type:'string',required: true, message: '输入电话', trigger: 'blur' }
                    ]
                },
            	/*生产类型表显示字段*/
            	columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '车辆ID',
                        key: 'id'
                    },
                    {
                        title: '车型',
                        key: 'name'
                    },
                    {
                        title: '分类',
                        key: 'kind'
                    },
                    {
                        title: '停车位',
                        key: 'carOption'
                    },
                     {
                        title: '电话',
                        key: 'phone'
                    }
                  
                ],
                /*生产类型表数据*/
                data1: []
            }
        },
        mounted(){
        	/*页面初始化调用方法*/
            this.getTable({
                "pageInfo":this.pageInfo,
                'id':this.id
            });
            this.axios({
              method: 'get',
              url: '/menus/carss' 
            }).then(function (response) {
                var listTemp = response.data.data;
                for (var i = 0; i < listTemp.length; i++) {
                    this.menuList.push({
                        "value": listTemp[i].type,
                        "label": listTemp[i].name
                    });
                }            
            }.bind(this)).catch(function (error) {
              alert(error);
            });          
        },
        methods:{
        	/*pageInfo实体初始化*/
        	initPageInfo(){
        		this.pageInfo.page = 0;
        		this.pageInfo.pageSize = 10;
            },
            /*initCars实体初始化*/
        initCars(){
                this.cars.id = null;  
                this.cars.phone = null;        
                this.cars.carType = null;
                this.cars.kind = null;
                this.cars.carOption = null;
                this.cars.state = null; 
            },  
            /*carsSet设置*/
            carsSet(e){
                this.cars.id = e.id;   
                this.cars.phone = e.phone;        
                this.cars.carType = e.carType;
                this.cars.kind = e.kind;
                this.cars.carOption = e.carOption;
                this.cars.state = e.state;
            },
            /*initCarsNew实体初始化*/
            initCarsNew(){
                this.carsNew.id = null;
                this.carsNew.phone = null;
                this.carsNew.carType = null;
                this.carsNew.kind = null;
                this.carsNew.carOption = null;
                this.carsNew.state = null; 
            },
             /*menuModify设置*/
            carsModifySet(e){
                this.carsModify.id = e.id; 
                this.carsModify.phone = e.phone;        
                this.carsModify.carType = e.carType;
                this.carsModify.kind = e.kind+'';
                this.carsModify.carOption = e.carOption+'';
                this.carsModify.state = e.state;          
            },
            /*得到表数据*/
            getTable(e) {
                this.axios({
                  method: 'get',
                  url: '/carAll',
                  params: {
                    'page':e.pageInfo.page,
                    'pageSize':e.pageInfo.pageSize,
                  }
                }).then(function (response) {
                    this.data1=response.data.data;
                    this.total=response.data.totalCount;
                }.bind(this)).catch(function (error) {
                  alert(error);
                });
            },
           
            /*分页点击事件*/
            pageSearch(e){
                this.pageInfo.page = e-1;
                this.getTable({  
                    "pageInfo":this.pageInfo,
                    'id':this.id
                });
            },
             /*新建点击触发事件*/
            openNewModal(){
                this.newModal = true;
                this.initCarsNew();
                this.data1.sort();
                this.count = 0;
                this.groupId = null;
            },
            /*新建modal的newOk点击事件*/
            newOk (carsNew) { 
                this.$refs[carsNew].validate((valid) => {
                    if (valid) {
                        this.initCars();
                        this.carsSet(this.carsNew);
                        this.axios({
                            method: 'post',
                            url: '/menus/cars',
                            data: this.cars
                        }).then(function (response) {
                            this.initCarsNew();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                'id':this.id
                            });
                            this.$Message.info('新建成功');
                        }.bind(this)).catch(function (error) {
                            alert(error);
                        });  
                        this.newModal = false;
                    }else {
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*点击修改时判断是否只选择一个*/
            openModifyModal(){
                if(this.count > 1 || this.count < 1){
                    this.modifyModal= false; 
                    this.$Message.warning('请至少选择一项(且只能选择一项)');  
                }else{
                    this.modifyModal = true;
                    var _this = this;
                    // 返显
                    this.axios({
                        method: 'post',
                        url: '/zgr/cars',
                        data: this.groupId
                        
                    }).then(function (response) {
                        console.log(response.data);
                        _this.carsModifySet(response.data);

                    })
                }
            },
            /*修改modal的modifyOk点击事件*/
            modifyOk (carsModify) { 
                this.$refs[carsModify].validate((valid) => {
                    if (valid) {
                        this.initCars();
                        this.carsSet(this.carsModify);
                        this.axios({
                            method: 'put',
                            url: '/cars/'+this.cars.id,
                            data: this.cars
                        }).then(function (response) {
                            this.initCarsNew();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                'id':this.id
                            });
                            this.$Message.info('修改成功');
                        }.bind(this)).catch(function (error) {
                            alert(error);
                        });  
                        this.modifyModal = false;
                    }else {
                        this.$Message.error('表单验证失败!');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*modal的cancel点击事件*/
            cancel () {
                this.$Message.info('点击了取消');
            },
            /*table选择后触发事件*/
            change(e){
                if(e.length==1){
                    this.carsModifySet(e['0']);
                }

                this.setGroupId(e);              
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e){
                this.groupId=[];
                this.count=e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].id);
                }
            },
            /*删除table中选中的数据*/
            del(){
                if(this.groupId!=null && this.groupId!=""){
                    this.axios({
                    method: 'delete',
                    url: '/DelCars',
                    data: this.groupId

                    }).then(function (response) {
                        this.getTable({
                            "pageInfo":this.pageInfo,
                            'id':this.id
                        });
                        this.groupId=null;
                        this.count=0;
                        this.$Message.info('删除成功');
                    }.bind(this)).catch(function (error) {
                        alert(error);
                    });
                }
            },
            /*表格中双击事件*/
            dblclick(e){
                this.carsModifySet(e);
                this.modifyModal = true;
                this.data1.sort();
            }
        }
    }
</script>